<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sudo Slider | Tabs demo</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<link rel="STYLESHEET" type="text/css" href="../css/style.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
		    var speed = 800;
		    var sudoSlider = $("#slider").sudoSlider({
                speed: speed,
		        beforeAnimation: function(t){ 
		            var substract = $('#slidemenu ul').offset();
					var posi = $('#slidemenu ul li').eq(t-1).offset();
					var left =  posi.left - substract.left;
					var width = $('#slidemenu ul li').eq(t-1).width();
					$('#slidemenu ul li.currentone').animate({
						left: left
						}, speed).children().animate({
						width: width
						}, speed);
					oldt = t;
		        },
		        customLink: '.custom'
		    });
		});
	</script>
	<style>
#slidemenu{height: 40px;text-align:center;}
#slidemenu ul{text-align:center;margin: 0;padding: 0;list-style-type: none;font-weight: bold;}
#slidemenu ul li{float:left;display:block;position:relative;height:40px;background:#5DC9E1;margin-right:15px;}
#slidemenu ul li a{z-index:40;	float: left;padding: 12px 15px;text-decoration: none;color: #FFF;background: transparent;position:relative;}
#slidemenu ul li .hover{height:40px;position:absolute;width:100px;z-index:20;	background: #333 url('../images/hover.png') repeat-x;}
	</style>
</head>
<body>
<div id="container">
	<h1>Sudo Slider jQuery Plugin - Tabs demo</h1>
	<a href="http://webbies.dk/SudoSlider/help/#Settings-afterAnimation">afterAnimation & beforeAnimation in docs</a>
	<div style="position:relative;">
		<div id="slidemenu">
			<ul style="position:relative;">
				<li data-target="1" class="custom current"><a href="javascript:void(0);">Sunset</a></li>
				<li data-target="2" class="custom"><a href="javascript:void(0);">Mountains</a></li>
				<li data-target="3" class="custom"><a href="javascript:void(0);">Road</a></li>
				<li data-target="4" class="custom"><a href="javascript:void(0);">Sunset + people</a></li>
				<li data-target="5" class="custom"><a href="javascript:void(0);">Goat</a></li>
				<li class="currentone" style="position: absolute; left: 0px; "><div class="hover" style="display: block; width: 71px; "></div></li>
			</ul>
		</div>
	    <div id="slider" style="position:relative;" class="slidecontainer slider">
	        <ul>                
	            <li><img src="../images/01.jpg" alt="image description"/></li>
	            <li><img src="../images/02.jpg" alt="image description"/></li>
	            <li><img src="../images/03.jpg" alt="image description"/></li>
	            <li><img src="../images/04.jpg" alt="image description"/></li>
	            <li><img src="../images/05.jpg" alt="image description"/></li>            
	        </ul>
	    </div>
	</div>
	<h3>Usage: See the source code</h3>
</div>

<div style="width:728px;height:90px;margin:0 auto;">
	<script type="text/javascript">
		<!--
		google_ad_client = "pub-8170632875475442";
		/* Sudo Slider, lang horisontal */
		google_ad_slot = "0149025622";
		google_ad_width = 728;
		google_ad_height = 90;
		//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>